<template>
  <div :class="prefixCls">
    <BasicForm @register="registerForm" @submit="handleSubmit" :class="`${prefixCls}-form`"> 
      <template #formFooter>
        <a-button :class="`${prefixCls}-form-submit`" @click="handleSubmit" type="primary" :loading="loading" style="margin-right: 0.9rem">确定</a-button>
      </template>
    </BasicForm>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { VerifyModal }  from '/@/components/BizVerify';
import { BasicForm, FormSchema } from '/@/components/Form/index';
import { useConfigForm, ConfigFormProps } from '/@/views/system/configCenter/hooks/useConfigForm'
import { ConfigKey } from '/@/views/system/config/config.model';
import { useModal } from '/@/components/Modal';
import { useDesign } from '/@/hooks/web/useDesign';
import { PageWrapper } from '/@/components/Page';
import { BizType } from '/@/api/sys/model/msgPushModel';
const emit = defineEmits(['query-success'])

const { prefixCls } = useDesign('wx-cp-account')
const [registerVerifyModal, { openModal: openVerifyModal }] = useModal();

const formSchema: FormSchema[] = [
  {
    field: 'baseDivider',
    label: "应用信息",
    component: "Divider"
  },
  {
    field: 'name',
    label: '应用名称',
    component: 'Input',
    required: true
  },
  {
    field: 'corpId',
    label: '企业CorpId',
    component: 'Input',
    required: true
  },  
  // {
  //   label: '应用二维码',
  //   field: 'qrCodeUrl',
  //   component: 'MyImageUpload',
  //   componentProps: {
  //     fileMax:1,
  //     bizType: UploadBizType.GENERAL_IMAGE
  //   },
  // },


  {
    field: 'agentId',
    label: 'AgentId',
    required: true,
    helpMessage: [
      '应用ID是应用开发识别码，配合开发者密码可调用企业微信的接口能力。',
      '登录企业微信平台，应用管理-选择应用，记录AgentId',
    ],
    component: 'Input',
  },
  {
    label: '密钥',
    field: 'secret',
    required: true,
    helpMessage: [
      '引用密钥是校验企业微信应用身份的密码，具有极高的安全性',
      '登录企业微信平台，应用管理-选择应用，记录secret',
    ],
    component: 'Input'
  },

  {
    field: 'msgPushDivider',
    label: "消息推送配置",
    component: "Divider"
  },
  {
    field: 'msgPushUrl',
    label: 'URL',
    dynamicDisabled: true,
    helpMessage: [ 
      '填写带https:// 头的有效URL链接，填写URL时需要正确响应企业微信验证URL的请求',
      '用于接收托管企业微信应用的用户消息、进入应用事件、通讯录变更事件'
    ],
    component: 'Input',
  },
  {
    label: 'Token',
    field: 'token',
    required: true,
    helpMessage: [ '必须为英文或数字' ],
    rules: [
      { required: true, message: 'Token不能为空' },
      { min: 5, max: 32, message: '长度在 5 到 32 个字符', trigger: 'blur' },
    ],
    component: 'Input'
  },

  {
    label: 'aesKey',
    field: 'aesKey',
    rules: [
      { required: true, message: 'aesKey不能为空' },
      { min: 1, max: 43, message: '长度在 1 到 43 个字符', trigger: 'blur' },
    ],
    helpMessage: [ '消息加密密钥由43位字符组成，可随机修改，字符范围为A-Z，a-z，0-9。' ],
    component: 'Input'
  }
];


const configFromProps : ConfigFormProps = {
  configKey: ConfigKey.WX_CP,
  schemas: formSchema,
  labelWidth: 140
}
const { 
  registerForm, handleSubmit, loading 
} = useConfigForm(configFromProps, emit)

</script>


<style lang="less">
  @prefix-cls: ~'@{namespace}-wx-cp-account';

  .@{prefix-cls} {
    padding: 10px;
    background-color: @component-background;
    &-form {
      width: 700px;
      &-submit {
        margin-left: 140px;
      }
    }
  }


</style>../useConfigForm